import 'package:firstflutterapp/state_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class _MyHomePageState extends State<MyHomePage> {
  RaisedButton _setItemButton(String text, void onPressed()) =>
      RaisedButton(onPressed: onPressed, child: Text(text));

  @override
  Widget build(BuildContext context) {
    /*
    Scaffold 是 Material 库中提供的页面脚手架，它提供了默认的导航栏、标题和包含主屏幕widget树（后同“组件树”或“部件树”）的body属性，组件树可以很复杂
     */
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      /*
      body的组件树中包含了一个Center 组件，Center 可以将其子组件树对齐到屏幕中心。此例中， Center 子组件是一个Column 组件，Column的作用是将其所有子组件沿屏幕垂直方向依次排列；
       */
      body: Center(
        child: ListView(
          children: <Widget>[
            _setItemButton('hello_flutter 计数器案例',
                () => Navigator.pushNamed(context, "hello_flutter")),
            _setItemButton('flutter statefulwidget生命周期',
                () => Navigator.pushNamed(context, "life_cycle_flutter")),
            _setItemButton(
                '基础组件', () => Navigator.pushNamed(context, "basic_widget")),
            _setItemButton(
                '容器组件', () => Navigator.pushNamed(context, "container_widget")),
//            Text(
//              '$_counter',
//              textAlign: TextAlign.center,
//              style: Theme.of(context).textTheme.display1,
//            ),
            FlatButton(
              child: Text("open new route(use routes register)"),
              textColor: Colors.blue,
              //通过路由名称来打开新路由，可以使用Navigator 的pushNamed ----Future pushNamed(BuildContext context, String routeName,{Object arguments})
              onPressed: () {
                Navigator.pushNamed(context, "new_route");
              },
            ),
            FlatButton(
              child: Text("open new route"),
              textColor: Colors.blue,
              onPressed: () {
                //导航到新路由
                /*Navigator是一个路由管理的组件，它提供了打开和退出路由页方法。Navigator通过一个栈来管理活动路由集合。通常当前屏幕显示的页面就是栈顶的路由
                Future push(BuildContext context, Route route)
将给定的路由入栈（即打开新的页面），返回值是一个Future对象，用以接收新路由出栈（即关闭）时的返回数据。

bool pop(BuildContext context, [ result ])
将栈顶路由出栈，result为页面关闭时返回给上一个页面的数据。
                 */

                Navigator.push(context,
                    /*
                MaterialPageRoute继承自PageRoute类，PageRoute类是一个抽象类，表示占有整个屏幕空间的一个模态路由页面，它还定义了路由构建及切换时过渡动画的相关接口及属性。
                MaterialPageRoute 是Material组件库提供的组件，它可以针对不同平台，实现与平台页面切换动画风格一致的路由切换动画：
对于Android，当打开新页面时，新的页面会从屏幕底部滑动到屏幕顶部；当关闭页面时，当前页面会从屏幕顶部滑动到屏幕底部后消失，同时上一个页面会显示到屏幕上。
对于iOS，当打开页面时，新的页面会从屏幕右侧边缘一致滑动到屏幕左边，直到新页面全部显示到屏幕上，而上一个页面则会从当前屏幕滑动到屏幕左侧而消失；
当关闭页面时，正好相反，当前页面会从屏幕右侧滑出，同时上一个页面会从屏幕左侧滑入。
MaterialPageRoute({
    WidgetBuilder builder, 是一个WidgetBuilder类型的回调函数，它的作用是构建路由页面的具体内容，返回值是一个widget。我们通常要实现此回调，返回新路由的实例
    RouteSettings settings,包含路由的配置信息，如路由名称、是否初始路由（首页）
    bool maintainState = true,默认情况下，当入栈一个新路由时，原来的路由仍然会被保存在内存中，如果想在路由没用的时候释放其所占用的所有资源，可以设置maintainState为false
    bool fullscreenDialog = false,表示新的路由页面是否是一个全屏的模态对话框，在iOS中，如果fullscreenDialog为true，新页面将会从屏幕底部滑入（而不是水平方向）
  })
                 */
                    MaterialPageRoute(builder: (context) {
                  return NewRoute();
                }));
              },
            ),
            _setItemButton('点击我跳转传值页面', () async {
              var result = await Navigator.push(context,
                  MaterialPageRoute(builder: (context) {
                return TipRoute(
                  text: "我是一个传值的提示文字",
                );
              }));
              print("路由器返回值:$result");
            }),
            RaisedButton(
              onPressed: () => Navigator.pushNamed(context, "new_router_arg",
                  arguments: "hi，美女"),
              child: Text("点击我跳转传值页面--命名路由"),
            ),
            Echo(text: "你好", backgroundColor: Colors.yellow),
            RaisedButton(
              onPressed: () {
//              context必须是子类构建的context
//              ScaffoldState _state =  context.findAncestorStateOfType();
//            ScaffoldState _state = Scaffold.of(context);
//               debugPrint(_state.toString());
//               _state.showSnackBar(SnackBar(
//                  content: Text("我是SnackBar"),
//               ));
//                _globalKey.currentState.showSnackBar(SnackBar(
//                  content: Text("我是SnackBar"),
//                ));
              },
              child: Text("显示snackbar"),
            ),
            ParentWidget(),
          ],
        ),
      ),
//      key: _globalKey,
    );
  }

//定义一个globalKey, 由于GlobalKey要保持全局唯一性，我们使用静态变量存储
//使用GlobalKey开销较大，如果有其他可选方案，应尽量避免使用它。另外同一个GlobalKey在整个widget树中必须是唯一的，不能重复
//  static GlobalKey<ScaffoldState> _globalKey = GlobalKey();

}

//Stateful widget可以拥有状态，这些状态在widget生命周期中是可以变的
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  /*
  构建UI界面的逻辑在build方法中，当MyHomePage第一次创建时，_MyHomePageState类会被创建，
  当初始化完成后，Flutter框架会调用Widget的build方法来构建widget树，最终将widget树渲染到设备屏幕上
  * */
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class NewRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("new route"),
      ),
      body: Center(
        child: Text("this is new route"),
      ),
    );
  }
}

class TipRoute extends StatelessWidget {
  final String text; //接收一个传值

  TipRoute({Key key, @required this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("路由传值测试"),
      ),
      body: Padding(
        padding: EdgeInsets.all(18),
        child: Center(
          child: Column(
            children: <Widget>[
              Text(text),
              RaisedButton(
                onPressed: () => Navigator.pop(context, "我是一个返回值"),
                child: Text("返回传值"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class TipRoute1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //获取路由参数
    var args = ModalRoute.of(context).settings.arguments;
    return Scaffold(
      appBar: AppBar(
        title: Text("路由表注册传值"),
      ),
      body: Padding(padding: EdgeInsets.all(20), child: Text("传值获取值：$args")),
    );
  }
}

/*
widget的构造函数参数应使用命名参数，命名参数中的必要参数要添加@required标注，这样有利于静态代码分析器进行检查。另外，在继承widget时，第一个参数通常应该是Key，
另外，如果Widget需要接收子Widget，那么child或children参数通常应被放在参数列表的最后。同样是按照惯例，Widget的属性应尽可能的被声明为final，防止被意外改变。
 */
class Echo extends StatelessWidget {
  const Echo({Key key, @required this.text, this.backgroundColor: Colors.blue})
      : super(key: key);

  final String text;
  final Color backgroundColor;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: backgroundColor,
        child: Text(text),
      ),
    );
  }
}
